<html lang="zh-cn">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--    <link rel="stylesheet" type="text/css" href="../css/base.css"/>-->
    <!--引入 element-ui 的样式-->
    <link rel="stylesheet" type="text/css" href="css/element.css">
    <!-- 必须先引入vue后使用element-ui -->
    <script src="js/vue.js"></script>
    <!-- 引入element 的组件库-->
    <script src="js/element.js"></script>
</head>


<body>
<div id="app">
    <el-container height="500px">
        <!--        左侧栏目-->
        <el-aside width="300px" height="500px" style="background-color: rgb(238, 241, 246)">
            <el-container>
                <el-header height="20%">上侧工具栏</el-header>
                <el-main height="80%">
                    <el-tree
                            :data="treeData"
                            show-checkbox
                            default-expand-all
                            node-key="id"
                            ref="tree"
                            highlight-current
                            :props="defaultProps">
                    </el-tree>
                </el-main>
            </el-container>
        </el-aside>


    </el-container>
</div>
</body>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            treeData: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        },
        methods: {
            getCheckedNodes() {
                console.log(this.$refs.tree.getCheckedNodes());
            },
            getCheckedKeys() {
                console.log(this.$refs.tree.getCheckedKeys());
            },
            setCheckedNodes() {
                this.$refs.tree.setCheckedNodes([{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 9,
                    label: '三级 1-1-1'
                }]);
            },
            setCheckedKeys() {
                this.$refs.tree.setCheckedKeys([3]);
            },
            resetChecked() {
                this.$refs.tree.setCheckedKeys([]);
            }
        }
    })
</script>

</html>